<template>
	<view class="content">
		<view class="u-demo-block__content">
			<view class="view-bg-color">
				<u-row justify="space-between" gutter="10" class="row">
					<text>快来一起玩游戏吧</text>
					<text>快来一起玩游戏吧</text>
					<text>快来一起玩游戏吧</text>
				</u-row>
				<u-row justify="space-between" gutter="10" class="row">
					<u-col span="4">
						<view class="demo-layout bg-purple col-bg">
							<u-button text="鞭炮过年" size="mini"></u-button>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">
							<u-button text="一起听歌" size="mini"></u-button>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<u-button text="创意作品" size="mini"></u-button>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" gutter="10" class="row">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<u-button text="猜灯谜" size="mini"></u-button>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">
							<u-button text="时空祝福" size="mini"></u-button>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<u-button text="互动问答" size="mini"></u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 200rpx;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
	.u-demo-block__content{
		padding: 30rpx;
	}
	.view-bg-color{
		padding: 30rpx 10rpx;
		border-radius: 10rpx;
	}
	.row{
		margin-bottom: 20rpx;
	}
	.row:last-child{
		margin-bottom: 0;
	}
	.col-bg{
		background-image: url('/static/bg/yh.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>